/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Descriptions, DatePicker, TreeSelect,
} from 'antd';
import {connect} from 'dva';
import find from 'lodash/find'
import request from '@/utils/request';
const FormItem = Form.Item;
const { TextArea } = Input;
const TreeNode = TreeSelect.TreeNode;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meters:[],
      nodeDataArray:[],
      type:this.props.editRecord.type,
      villages:[],
      all_workstations:[]
    };
  }

  componentDidMount() {
    console.log('exitJson',this.props.exitJson)
    const type=this.state.type
    if(type===1){
      this.getType1()
    }else if(type===4){
      this.getType4()
    }else if(type===5){
      this.getType5()
    }
  }
  getType1=()=>{//普通水表
    const that=this
    request(`/join_area_meters`, {
      method: 'GET',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          meters: response.data.data,
          nodeDataArray:this.props.exitJson.nodeDataArray
        });
      }
    });
  }
  getType2=()=>{//虚拟水表（流入流出型）

  }
  getType3=()=>{//虚拟水表（只流出型）

  }
  getType4=()=>{//工作站
    const that=this
    request(`/join_area_workstations`, {
      method: 'GET',
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          all_workstations:response.data.data
        })
      }
    })
  }
  getType5=()=>{//下级DMA分区
    const that=this
    request(`/areas`, {
      method: 'GET',
      params:{
        return: 'all'
      }
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          villages:response.data.data
        })
      }
    })
  }
  renderTreeNodes=(data)=>{
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode value={item.id} title={item.name} key={item.id} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return  <TreeNode value={item.id}  title={item.name} key={item.id} />
    });
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      }
    };
    console.log(this.props.editRecord)
    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form>
          {
            (this.props.editRecord.type===2||this.props.editRecord.type===3)&&
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
              虚拟表名称
            </span>
                )}>
                {getFieldDecorator('name', {
                  initialValue: this.props.editRecord.name,
                  rules: [{required: true, message:''}],
                })(
                  <Input/>
                )}
              </FormItem>
          }
          {
            (this.props.editRecord.type===1)&&
            <FormItem
              {...formItemLayoutWithLabel}
              label={(
                <span>
             水表号
            </span>
              )}>
              {getFieldDecorator('meter', {
                initialValue: this.props.editRecord?{key:this.props.editRecord.key,label:this.props.editRecord.name}:
              {key:'',label:''},
              })(
                <Select  labelInValue={true}>
                  {
                    this.state.meters.map((item,index)=>{
                      return <Option key={index}  value={item.id.toString()}>{item.name}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
          }
          {
            this.props.editRecord.type===4&&
            <FormItem
              {...formItemLayoutWithLabel}
              label={(
                <span>
             工作站
            </span>
              )}>
              {getFieldDecorator('workstation', {
                initialValue: this.props.editRecord?{key:this.props.editRecord.key,label:this.props.editRecord.name}:
                  {key:'',label:''},
              })(
                <Select labelInValue={true}>
                  {
                    this.state.all_workstations.map((item,index)=>{
                      return <Option key={index} value={item.id.toString()}   >{item.name}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
          }
          {
            this.props.editRecord.type===5&&
            <FormItem
              {...formItemLayoutWithLabel}
              label={(
                <span>
             下级DMA
            </span>
              )}>
              {getFieldDecorator('dma', {
                initialValue: this.props.editRecord?{value:this.props.editRecord.key,label:this.props.editRecord.name}:
                  {value:'',label:''},
              })(
                <TreeSelect
                  labelInValue={true}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                >
                  {this.renderTreeNodes(this.state.villages)}
                </TreeSelect>
              )}
            </FormItem>
          }
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
